// 柱状图组件
// 1.把功能代码都放到这个组件中
// 2.把可变的部分抽象成props参数

import * as echarts from 'echarts';
//useEffect在dom渲染完毕后才会调用
//保证能够获取到有效dom节点
import { useEffect, useRef } from 'react';

const BarChart = ({title, chartId}) => {
    const chartRef = useRef(null)
    useEffect(() => {
        //保证dom可用才进行图标的渲染
        //1.获取渲染图标的dom节点，原生dom操作和react的dom操作
        // const chartDom = document.getElementById('main');
        const chartDom = chartRef.current;

        //2.图标初始化生成图标实例对象
        const myChart = echarts.init(chartDom);

        //3.图标配置项，准备参数
        const option = {
            title:{
                text:title
            },
            xAxis: {
                type: 'category',
                data: ['Vue', 'React', 'Angular']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [10, 40, 70],
                    type: 'bar' //柱状图
                }
            ]
        };

        //4.如果参数有值，就调用实例的方法完成对图标的渲染
        option && myChart.setOption(option);

        //5.图表销毁，卸载组件
        return () => {
            if (myChart) {
                myChart.dispose(); // ← 关键修复
            }
        }
    }, [title])

    //渲染图表必须给div节点设置宽高
    return <div ref={chartRef} id={chartId} style={{ width: 400, height: 300 }} />
}
export default BarChart